<template>
  <div class='container'>
    <el-dialog
      :title="articleId?'编辑文章':'添加文章'"
      visible
      width="65%"
      center
      :before-close="close"
      >
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item prop="title" label="文章标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item prop="articleBody" style="height:420px" label="文章内容">
          <quill-editor v-model="form.articleBody" style="height:300px"></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input placeholder="非必填" v-model="form.videoURL"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addArticle">{{articleId?'编辑':'添加'}}</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/articles.js'
export default {
  props: {
    // addVisible: {
    //   type: Boolean,
    //   required: true
    // },
    articleId: {
      type: Number
    }
  },
  data () {
    return {
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: ['change', 'blur'] },
          { pattern: /^\S{1,50}$/, message: '请输入1-50个字符，不包含特殊字符', trigger: ['change', 'blur'] }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  created () {
    this.getFormList()
  },
  methods: {
    // 添加/编辑文章
    addArticle () {
      if (this.articleId) {
        update(this.form)
          .then(() => {
            this.$emit('closeAdd')
            this.$emit('getArticles')
            this.$message.success('编辑成功')
          })
      } else {
        add(this.form).then(() => {
          this.$emit('closeAdd')
          this.$emit('getArticles')
          this.$message.success('添加成功')
        })
      }
    },
    // 关闭页面
    close () {
      if (this.articleId) {
        this.$confirm('是否取消编辑', '提示', {
          type: 'warning'
        }).then(() => {
          this.$emit('closeAdd')
          this.$refs.form.resetFields()
          this.form = {
            title: '',
            articleBody: '',
            videoURL: ''
          }
        }).catch(() => {})
      } else {
        this.$confirm('此操作会丢失文章编辑内容，是否继续', '提示', {
          type: 'warning'
        }).then(() => {
          this.$emit('closeAdd')
          this.$refs.form.resetFields()
          this.form = {
            title: '',
            articleBody: '',
            videoURL: ''
          }
        }).catch(() => {})
      }
    },
    // 获取编辑列表
    getFormList () {
      if (this.articleId) {
        detail({ id: this.articleId })
          .then(({ data }) => {
            console.log(data)
            this.form = data
          })
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
